<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输入框与标签内容同步</title>
</head>
<body>
<div id="app">
    <form action="">
        <label for="name">姓名</label><input type="text" name="name" id="name" v-bind:value="name"
                                             v-on:input="contentChanged">
        <label id="content">{{ name }}</label>
        <!--<div></div>-->
    </form>
</div>

<script type="module">
    import {createApp, ref} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let name = ref("abc")

                function contentChanged(event) {
                    /*
                    // console.log(event);
                    console.log(event.target.value);
                    */

                    name.value = event.target.value
                }

                return {
                    name, contentChanged
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>